<template>
  <div>
    <el-col :offset="9" :span="8">
      <el-input v-model="addCourseInfo.name" placeholder="课程名称"></el-input>
      <el-input v-model="addCourseInfo.credits" placeholder="课程学分"></el-input>
      <el-input v-model="addCourseInfo.teacherId" placeholder="任课教师工号"></el-input>
      <el-input v-model="addCourseInfo.id" placeholder="课程号"></el-input>
      <el-button type="primary" @click="addCourse">添加课程</el-button>
    </el-col>
    <el-table :data="courses" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="课程号"></el-table-column>
      <el-table-column prop="name" label="课程名称"></el-table-column>
      <el-table-column prop="credits" label="课程学分"></el-table-column>
      <el-table-column prop="teacherName" label="授课教师"></el-table-column>
      <el-table-column prop="teacherId" label="教师工号"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" @click="editCourse(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteCourse(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogCourseInfoVisible" title="修改课程信息" width="40%" top="20vh" center>
      <el-form :model="editCourseInfo" label-width="100px" ref="form">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="editCourseInfo.name" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程学分" prop="credits">
          <el-input v-model="editCourseInfo.credits" placeholder="请输入课程学分"></el-input>
        </el-form-item>
        <el-form-item label="任课教师工号" prop="teacherId">
          <el-input v-model="editCourseInfo.teacherId" placeholder="请输入任课教师工号"></el-input>
        </el-form-item>
        <el-form-item label="课程号" prop="id">
          <el-input v-model="editCourseInfo.id" placeholder="请输入课程号"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogCourseInfoVisible = false">取消修改</el-button>
          <el-button type="primary" @click="handleEdit()">
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getAllCourseInfoService, addCourseInfoService, deleteCourseInfoService, updateCourseInfoService } from '@/api/manager.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const courses = ref([]);
const dialogCourseInfoVisible = ref(false);
const addCourseInfo = reactive({
  name: '',
  credits: '',
  teacherId: '',
  id: ''
});
//展示所有课程信息
const getCourseInfo = async () => {
  const res = await getAllCourseInfoService()
  courses.value = res.data
}
getCourseInfo()
const addCourse = async () => {
  if (addCourseInfo.name && addCourseInfo.credits && addCourseInfo.teacherId && addCourseInfo.id) {
    const res = await addCourseInfoService(addCourseInfo)
    getCourseInfo()
    ElMessage.success('添加成功!')
    addCourseInfo.name = ''
    addCourseInfo.credits = ''
    addCourseInfo.teacherId = ''
    addCourseInfo.id = ''

  } else {
    ElMessage.error('请填写完整信息!')
  }
};

const editCourseInfo = reactive({
  name: '',
  credits: '',
  teacherId: '',
  id: ''
});
const editCourse = async (course) => {
  dialogCourseInfoVisible.value = true
  editCourseInfo.name = course.name
  editCourseInfo.credits = course.credits
  editCourseInfo.teacherId = course.teacherId
  editCourseInfo.id = course.id
};
const handleEdit = async () => {
  if (editCourseInfo.name && editCourseInfo.credits && editCourseInfo.teacherId && editCourseInfo.id) {
    const res = await updateCourseInfoService(editCourseInfo)
    getCourseInfo()
    ElMessage.success('修改成功!')
    dialogCourseInfoVisible.value = false
    editCourseInfo.name = ''
    editCourseInfo.credits = ''
    editCourseInfo.teacherId = ''
    editCourseInfo.id = ''
  } else {
    ElMessage.error('请填写完整信息!')
  }

}
const deleteCourse = async (course) => {
  await ElMessageBox.confirm('你确认要删除该课程么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await deleteCourseInfoService(course.id)
  ElMessage.success('删除成功!')
  getCourseInfo()

};
</script>
<style scoped>
.el-button {
  margin: 15px 0;
}

.el-input {
  margin: 10px 0;
}

:deep(.el-form-item__label) {
  padding: 9px 12px 0 0
}

.el-button {
  margin: 0 5px;
}
</style>